<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task2-18</title>
    <style>
        body,html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .container {
            width: 600px;
            height: 600px;
            margin: 150px auto;
            background-color: #cde6c7;
            text-align: center;
            padding: 100px 0;
            box-sizing: border-box;
        }
        .inputNum,.inputArea {
            width: 200px;
            height: 200px;
            border: 0;
            vertical-align: middle;
            font-size: 16px;
            margin: 10px;
        }
        .inputNum {
            height: 30px;
            line-height: 30px;
            margin: 0;
        }
        .inputConfirm,.display span {
            width: 50px;
            color: #fff;
            font-size: 20px;
            line-height: 30px;
            padding: 5px;
            margin-right: 10px;
            background-color: #45b97c;
            vertical-align: middle;
            cursor: pointer;
        }
        .display {
            padding: 30px;
        }
        .display span {
            background-color: #65c294;
        }

    </style>
</head>
<body>
    <div class="container">
        <textarea type="text" class="inputArea" id="inputNum" placeholder="  请输入数字或文本，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔。"></textarea><br /><span class="inputConfirm" onclick="handleFun('leftIn')">左侧入</span><span class="inputConfirm" onclick="handleFun('rightIn')">右侧入</span><span class="inputConfirm" onclick="handleFunOut('leftOut')">左侧出</span><span class="inputConfirm" onclick="handleFunOut('rightOut')">右侧出</span>
        <input type="text" class="inputNum" id="searchFrame" placeholder="请输入需要模糊查询的字段"><span class="search inputConfirm" onclick="blurSearch()">搜索</span>
        <div class="display" id="display">
        </div>
    </div>
    <script>
    var handleFun = function(func){
        var inputNum=document.getElementById('inputNum').value;
        var arrContent=inputNum.split(/[\n\s\t\r,，、;；]+/g);
        var $display=document.getElementById('display');
        for(var i=0;i<arrContent.length;i++){
            var $num=document.createElement("span");
            $num.innerHTML=arrContent[i];
            $num.addEventListener('click',function(){
                //触发click代码
                this.parentNode.removeChild(this);
            });
            switch(func){
                case "leftIn":if(inputNum){$display.insertBefore($num,$display.firstElementChild);}else{alert("输入不能为空");};break;
                case "rightIn":if(inputNum){$display.appendChild($num);}else{alert("输入不能为空");};break;
            }
        }
    }
    var handleFunOut = function(func){
        var $display=document.getElementById('display');
        switch(func){
            case "leftOut":try{$display.removeChild($display.firstElementChild);} catch(e){
                        alert("没有子节点可以继续删除，粗线异常咯哦小伙砸。");};
            case "rightOut":try{$display.removeChild($display.lastElementChild);} catch(e){
                        alert("没有子节点可以继续删除，粗线异常咯哦小伙砸。");};
        }
    }
    var blurSearch = function(){
        var keyWord=document.getElementById('searchFrame').value;
        var reg= new RegExp("("+keyWord+")+","g");
        var $displayItem=document.getElementById('display').children;
        var len=$displayItem.length;

        for(var i=0;i<len;i++){
                if(reg.test($displayItem[i].innerHTML)){
                    for(var j=0;j<len;j++ ){$displayItem[j].style.backgroundColor="#65c294";}
                    $displayItem[i].style.backgroundColor="red";
                } else {
                    $displayItem[i].style.backgroundColor="#65c294";
                }
        }
    }
    </script>
</body>
</html>